<template>
    <div class="body-container">
        <!--        头部部分-->
        <div class="header">
            <h3 class="page-header" style="margin-top: 20px;">
                管理员中心 <small>Welcome Administrator</small>
            </h3>
            <ol class="breadcrumb">
                <li @click="$router.push('/')"><a href="#">主页</a></li>
                <li @click="$router.push('/admin/index')"><a href="#">个人中心</a></li>
                <li class="active">老师信息管理</li>
            </ol>
        </div>

        <div class="content">
            <template>
                <el-table
                        v-loading="loading"
                        :data="teacherData.filter(data => !search || data.trueName.toLowerCase().includes(search.toLowerCase()))"
                        style="width: 100%">
                    <el-table-column width="70"
                                     label="用户ID"
                                     prop="userId">
                    </el-table-column>
                    <el-table-column width="80"
                                     label="职工号"
                                     prop="teaId">
                    </el-table-column>
                    <el-table-column
                            label="教学状态"
                            prop="isTeaching">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.isTeaching" type="warning">存在授课任务</el-tag>
                            <el-tag v-else type="info">未接受授课任务</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column width="100"
                                     label="用户名"
                                     prop="userName">
                    </el-table-column>
                    <el-table-column width="80"
                                     label="真实姓名"
                                     prop="trueName">
                    </el-table-column>
                    <el-table-column label="性别" width="60">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.gender">男</el-tag>
                            <el-tag v-else type="success">女</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column width="105"
                                     label="联系电话"
                                     prop="phone">
                    </el-table-column>
                    <el-table-column
                            label="联系地址"
                            prop="address">
                    </el-table-column>
                    <el-table-column width="90"
                                     label="身份证"
                                     prop="idCard">
                    </el-table-column>
                    <el-table-column
                            align="right">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="search"
                                    size="mini"
                                    placeholder="输入关键字搜索"/>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>

    </div>
</template>

<script>
    import {request} from "../../../api/request";

    export default {
        name: "TeacherManage",
        data() {
            return {
                teacherData: [],
                search: '',
                loading: true
            }
        },
        mounted() {
            let that = this;
            that.loading = true;
            request({
                method: 'post',
                url: '/admin/tea/all'
            }).then(function (data) {
                data = data.data;
                that.teacherData = data.data;
                setTimeout(_ => {
                   that.loading = false;
                });
            }).catch(function (err) {
                that.$message.error('获取教师信息失败');
            });
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
        }
    }
</script>

<style scoped>
    .body-container {
        width: 100%;
        height: 100%;
    }


</style>